<template>
  <section class="home-page">
     <div class="home-banner">
       <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="background:#8db5a0;">
            <img src="~assets/images/banner1.jpg"/>
          </div>
          <div class="swiper-slide" style="background:#717ea2;">
            <img src="~assets/images/banner1.jpg"/>
          </div>
          <div class="swiper-slide" style="background:#7b8294;">
            <img src="~assets/images/banner1.jpg"/>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="home-search">
        <input class="search-input" type="text" placeholder="位置/日期/关键词">
        <button type="button" class="searchbtn"><i class="iconfont icon-search"></i></button>
      </div>
     </div>
     <b-container class="home-hot">
       <b-row>
         <b-col sm="12" md="6" v-for="(item,index) in yjdata" :key="index">
            <div class="home-item-box">
              <b-link :href="`/article?id=${item.id}`" class="home-item-link">
                <div class="home-item-card">
                  <img :src="item.cover" alt="">
                  <div class="op-top">
                    <div class="item-type">{{item.tag}}</div>
                    <h3>{{item.title}}</h3>
                    <div class="item-info">
                      <p>{{item.desc}}</p>
                      <span>浏览：{{item.hits}}</span>
                    </div>
                  </div>
                </div>
              </b-link>
            </div>
         </b-col>
       </b-row>
     </b-container>
     <b-container class="home-featured">
       <div class="home-featured-title">为您精选</div>
       <b-row>
           <b-col sm="12" md="6" lg="4" v-for="(item,index) in houseList.list" :key="index">
             <item-card :data="item"></item-card>
           </b-col>
       </b-row>
       <b-row class="paginationbox" v-if="houseList">
         <b-pagination class="listpagination" size="md" :total-rows="houseList.count" v-model="currentPage" :per-page="10" :hide-goto-end-buttons="true"></b-pagination>
       </b-row>
     </b-container>
     <cp-footer></cp-footer>
  </section>
</template>

<script>
import axios from 'axios'
export default {
  // asyncData ({ app }) {
  //   return axios.get(`${app.$URL_HTTP}/house/paginate`)
  //   .then((res) => {
  //     console.log(res,'asyncData')
  //   })
  // },
  data(){
    return {
      houseList:'',
      yjdata:'',
      currentPage:1,
      page:1,
    }
  },
  components: {
      itemCard: () => import('../components/itemcard'),
      cpFooter:() => import('../components/footer'),
  },
  watch:{
    currentPage(){
      this.paginate(this.currentPage)
    }
  },
  mounted(){
    var swiper = new Swiper.default('.swiper-container', {
      loop:true,
      pagination: {
        el: '.swiper-pagination',
      },
    });
    this.paginate(this.page)
    this.yjlist();
  },
  methods:{
      paginate(page){
          this.$http.get(`${this.$URL_HTTP}/house/paginate?page=${page}`).then( (res) => {
              console.log(res)
              if(res.data.status){
                this.houseList = res.data.payload;
              }else{
                console.log(res.data.message)
              }
          })
      },
      yjlist(){
          this.$http.get(`${this.$URL_HTTP}/note/paginate/top`).then( (res) => {
              console.log(res)
              if(res.data.status){
                this.yjdata = res.data.payload.list;
              }else{
                console.log(res.data.message)
              }
          })
      }
  }
}
</script>

<style lang="less">
.home-page{
  width:100%;
  height:auto;
  .home-banner{
    width:100%;
    height:auto;
    position: relative;
    .swiper-container{
      width:100%;
      height:100%;
      img{
        width:100%;
      }
      .swiper-pagination-bullet{
        background:#fff;
        opacity: 1;
      }
      .swiper-pagination-bullet-active{
        background:#e1bf00;
      }
    }
    .home-search{
      position: absolute;
      top:50%;
      left:25%;
      z-index: 1;
      width:50%;
      margin-top:-24px;
      .search-input{
          width:100%;
          height:48px;
          border-radius:50px;
          font-size:14px;
          text-indent: 15px;
          outline:none;
          border:0;
          background:#fff;
      }
      .searchbtn{
        width:40px;
        height:40px;
        position: absolute;
        top:3px;
        right:10px;
        border:0;
        background:transparent;
        cursor: pointer;
        i{
          font-size:28px;
          font-weight:600;
          color:#e1bf00;
        }
      }
    }
    @media (max-width: 576px){
      .home-search{
        width:90%;
        left:5%;
      }
    }
  }
  .home-hot{
     margin:50px auto 30px;
    .home-item-box{
      border-radius: 8px;
      width:100%;
      overflow: hidden;
      margin-bottom:15px;
      .home-item-link{
        display:block;
        .home-item-card{
          width:100%;
          height: 150px;
          overflow: hidden;
          position: relative;
          img{
            width:100%;
            transition: all 0.3s linear;
          }
          .op-top{
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.3);
            color:#fff;
            position: absolute;
            top:0;
            left:0;
            padding:15px 10px;
            .item-type{
              color:#e1bf00;
              margin-bottom:30px;
            }
            h3{
              font-size:24px;
              letter-spacing: 5px;
              margin-bottom:10px;
            }
            .item-info{
              font-size:14px;
              display: flex;
              p{
                flex:2;
                letter-spacing: 3px;
              }
              span{
                width:100px;
              }
            }
          }
        }
      }
      .home-item-link:hover .home-item-card img{
        transform: scale(1.1)
      }
    }
    
  }
  .home-featured{
    .home-featured-title{
      font-size:24px;
      color:#333;
      margin-bottom:30px;
    }
  }
  .paginationbox{
    padding:50px 0;
    .listpagination{
      margin:0 auto;
      .page-link{
        color:#333;
      }
      .page-item.active .page-link{
        background:transparent;
        color:#e1bf00;
        border-color:#e1bf00;
      }
    }
  }
}
</style>
